<template>
  <div>
    <navTop :headTitle="headTitle"></navTop>
    <section class="add_address_container">
      <section class="section_list">
        <span class="section_left">联系人</span>
        <section class="section_right">
          <input type="text" placeholder="你的名字" class="input_style" v-model="addrName">
        </section>
      </section>
      <section class="section_list">
        <span class="section_left">联系电话</span>
        <section class="section_right">
          <div class="phone_add">
            <input type="text" placeholder="你的手机号" v-model="addrPhone" class="input_style"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
          </div>
        </section>
      </section>
      <section class="section_list">
        <span class="section_left">收货地址</span>
        <section class="section_right">
          <p style="margin:0.3rem 0 0" @click="ishowMap=true">
            <input type="text" placeholder="选择收货地址" readonly @click="showMap"
              v-model="localPoint.name"
            >
          </p>
          <p>
            <input type="text" placeholder="详细地址（如门牌号等）" class="input_style" v-model="addrAddress">
          </p>

        </section>
      </section>
    </section>
    <div class="determine" @click="newAddr2" v-if="this.$route.query.id">保存</div>
    <div class="determine" @click="newAddr" v-else>确定</div>
    <transition name="slide-fade">
      <qqmap v-show="ishowMap" :showMap="this.showMap" @getLocal="this.getLocal" :chooseLocal="chooseLocal"
        v-if="isRouterAlive"
      ></qqmap>
    </transition>
  </div>
</template>
<script>
import navTop from '~/components/common/navTop.vue';
import qqmap from '~/components/base/qqmap.vue';


export default {
  data() {
    return {
      isRouterAlive: true,
      headTitle: this.$route.query.id ? '修改地址' : '新增地址',
      ts: this.newStore(),
      ishowMap: false,
      addrPhone: '',
      addrName: '',
      addrAddress: '',
      dizhi: [],
      schoollist: {},
      school: '',
      localPoint: {},
      chooseLocal: { lat: '39.06552', lng: '117.11415' },
    };
  },
  components: {
    navTop,
    qqmap,
  },
  created() {
    // this.getLocation();
    if (this.$route.query.id) {
      this.getReviseaddr();
    }
  },
  methods: {
    newAddr2() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A654A225EA7D9630777924F3E35C51A2C546A677D1C1AAE06F9',
        phone: this.addrPhone,
        address: this.addrAddress,
        lng: this.chooseLocal.lng,
        lat: this.chooseLocal.lat,
        mapaddress: this.localPoint.name,
        schoolid: this.schoollist[this.school],
        name: this.addrName,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.$messagebox.alert('地址保存成功！', '提示');
        this.$router.back(-1);
      });
    },
    getReviseaddr() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D745FAF28C9C207F9FEC9C6279ED800E7',
        addressid: this.$route.query.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.addrName = ts.d.data.operation1[0].hash.name;
        this.addrPhone = ts.d.data.operation1[0].hash.phone;
        this.localPoint.name = ts.d.data.operation1[0].hash.mapaddress;
        this.chooseLocal = { lat: ts.d.data.operation1[0].hash.lat, lng: ts.d.data.operation1[0].hash.lng };
        this.addrAddress = ts.d.data.operation1[0].hash.address;
      });
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    getLocal(data) {
      this.localPoint = data;
      this.chooseLocal = data.latLng;
    },
    newAddr() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A654A225EA7D9630777924F3E35C51A2C546A677D1C1AAE06F9',
        phone: this.addrPhone,
        address: this.addrAddress,
        lng: this.localPoint.latLng.lng,
        lat: this.localPoint.latLng.lat,
        mapaddress: this.localPoint.name,
        schoolid: this.schoollist[this.school],
        name: this.addrName,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.$messagebox.alert('新建地址成功！', '提示');
        this.$router.back(-1);
      });
    },
    // getLocation() {
    //   const req = {
    //     handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D2D2C5C3C3BF5C3224EB425F14597A3B6',
    //     lng: '13.3',
    //     lat: '20.8',
    //   };
    //   this.spost(this.ts, '/mainservlet', req).then((ts) => {
    //     this.locationData = ts.d.data;
    //     for (let i = 0; i < this.locationData.operation1.length; i += 1) {
    //       this.dizhi.push(this.locationData.operation1[i].hash.schoolname);

    //       this.schoollist[this.locationData.operation1[i].hash.schoolname] = this.locationData.operation1[i].hash.schoolid;
    //     }
    //     this.school = this.dizhi[1];
    //     // this.getZtlist();
    //   });
    // },
    showMap() {
      this.reload();
      this.ishowMap = !this.ishowMap;
    },
  },
};
</script>
<style>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
@keyframes tipMove {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
input::-webkit-input-placeholder {
  color: #aaa;
}
.add_address_container {
  padding-top: 1rem;
  background: #fff;
}
.section_list {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}
.section_left {
  flex: 2;
  line-height: 1rem;
  text-align: center;
}
.section_right {
  flex: 5;
}
.section_right .tagSpan{
  background: #f1f1f1;
  width: 1rem;
  display: inline-block;
  margin-left: 0.3rem;
  text-align: center;
  font-size: 0.3rem;
  padding: 0.1rem 0.2rem;
  margin-top: 0.2rem;
  border-radius: 0.1rem;
}
.tagSpan:hover{
  background: rgba(76, 91, 228, 0.295);
}
.input_style {
  width: 100%;
  height: 1rem;
  color: #999;
  border: none;
  outline: none;
}
.choose_option {
  color: #333;
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}
.phone_add {
  display: flex;
  justify-content: center;
  align-content: center;
  padding-bottom: 0.2rem;
}
.icon-jia {
  line-height: 1rem;
  color: blueviolet;
  padding-right: 0.5rem;
  transform: scale(1.4);
}
.determine {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  line-height: 0.7rem;
  margin-top: 0.4rem;
  color: #fff;
  border-radius: 0.1rem;
  background: #3190e8;
}
.choosed {
  color: #4cd964;
}
</style>
